_this = null

(() ->
    $.fn.extend
        slideshow: (options)->
            return new Slideshow this, options
) jQuery


class Slideshow

    defaultOptions:
        duration: 5600,
        speed:    600

    constructor: (@element, options)->
        _this = this

        @items = []
        @element.children('li').each ()->
            _this.items.push
                title: $(this).children('h1').text(),
                image: $(this).children('img').attr('src')

        # options
        @options = $.extend @defaultOptions, options

        # attrs
        @container = $('<div class="slideshow-container">')
        @indicator = $('<ul class="indicator">')
        @position  = 0
        @interval  = null
        @resizeTO  = null
        @width     = @loadWidth()
        @count     = @items.length

        # construct
        @make()

        # init touches
        if Modernizr.touch and @count > 1
            @initTouch()

        # play if there's more than 1 slide
        # else, hide indicator
        if this.count > 1
            @play()
        else
            @indicator.hide()

        # onresize update slideshow
        $(window).resize (e)->
            if _this.resizeTO
                clearTimeout _this.resizeTO

            resizeCallback = ()->
                _this.resize e

            _this.resizeTO = setTimeout resizeCallback, 300

    loadWidth: ()->
        @width = @element.parent().width()

    make: ()->
        @element.css 'width', @count * @width

        # container
        @container
            .insertBefore @element
            .append @element

        # items
        @element.children 'li'
            .css 'width', @width

        # indicator
        @indicator.appendTo @container
        $(@items).each (index)->
            $('<li>')
                .appendTo _this.indicator
                .val index
                .click ()->
                    _this.goto(@value)
        _this.indicator.children('li').eq(0).addClass('selected')

    play: ()->
        @stop()
        intervalCallback = ()->
            _this.next()
        @interval = setInterval intervalCallback, @options.duration

    stop: ()->
        if @interval
            clearInterval @interval

    next: ()->
        @position++

        if @position >= @count
            @position = 0

        @element.animate
            marginLeft: -1 * @position * @width
        ,
            duration: @options.speed,
            complete: ()->
                _this.indicate()

    setPosition: (position)->
        @position = position
        @element.animate
            marginLeft: -1 * @position * @width
        ,
            duration: @options.speed

        @indicate()

    goto: (position)->
        @stop()
        @setPosition position
        @play()

    indicate: ()->
        @indicator.children('li')
            .removeClass 'selected'
            .eq(@position).addClass 'selected'

    resize: (e)->
        @loadWidth()
        @element.css 'width', @items.length * @width
        @element.children('li').css 'width', @width
        @element.css 'margin-left', -1 * @position * @width

    initTouch: ()->
        return
        $('<script type="text/javascript">')
            .attr 'src', '/js/jquery.mobile-1.4.5.custom.min.js'
            .appendTo 'head'
            .ready ()->
                _this.element.on 'swipeleft', (e)->
                    pos = _this.position+1
                    if pos<_this.count
                        _this.goto pos
                _this.element.on 'swiperight', (e)->
                    pos = _this.position-1
                    if pos>=0
                        _this.goto pos